<template>
  <div>
    <el-tree default-expand-all :data="list" :props="defaultProps">
      <template #default="{ node, data }">
        <div
          class="tree-row tree-three"
          :class="{
            'tree-one': node.level === 1,
            'tree-two': node.level === 2,
          }"
        >
          <div class="left">
            <p class="label">{{ data.name }}</p>
            <p
              class="start-time"
              v-if="data.type === 2 && data.videoType === 1"
            >
              开播时间：{{ data.startTime }}
            </p>
          </div>
          <template v-if="data.type === 2">
            <!--录播-->
            <template v-if="data.videoType === 2">
              <el-button v-if="data.videoFileUrl">查看录播</el-button>
            </template>
            <!--直播-->
            <template v-else>
              <el-tag v-if="data.liveStatus === 3" type="info">直播结束</el-tag>
              <el-button v-if="data.playbackUrl">查看回放</el-button>
              <el-button
                v-else-if="[1, 2].includes(data.liveStatus)"
                color="#d72522"
                :loading="enterLoading"
                @click="enterLive(data)"
              >
                进入直播
              </el-button>
            </template>
          </template>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { CourseTreeVO } from "@/views/student/types";
import { liveInfo } from "@/service/course";
import router from "@/router";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
interface Props {
  list: CourseTreeVO[];
}
defineProps<Props>();

const defaultProps = {
  children: "childrenList",
  label: "name",
};
const enterLoading = ref(false);

async function enterLive(data: CourseTreeVO) {
  try {
    enterLoading.value = true;
    const { data: roomInfo } = await liveInfo(data.id);
    enterLoading.value = false;
    const info = { ...userStore.userInfo, ...roomInfo };
    console.log(info, "info");
    userStore.setInfo(info);
    router.replace({
      path: "/enterRoom",
    });
  } catch (e) {
    enterLoading.value = false;
    console.error(e);
  }
}
</script>

<style scoped lang="scss">
:deep(.el-tree-node__content) {
  height: auto;
}
.tree-row {
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 39px;
  font-size: 16px;
  color: #7b7676;
  padding-right: 20px;
  .left {
    flex: 1;
  }
}
.tree-one {
  color: #000;
  font-size: 18px;
}
.tree-two {
}
.tree-three {
  border-bottom: 1px solid #e3e3e3;
}
</style>
